<template>
  <div class="form-modal">
    <div class="modal-header">修改登录邮箱</div>
    <div class="modal-content">
      <div class="form-item">
        <label>新邮箱</label>
        <div class="form-item-content">
          <mds-input v-model="formValue.newemail" placeholder="请输入新的邮箱地址"></mds-input>
          <p>收到并激活验证邮箱之后，请使用新的邮箱登录</p>
        </div>
      </div>
      <div class="form-item">
        <label>验证码</label>
        <div class="form-item-content">
          <mds-input v-model="formValue.verificationCode" placeholder="图片验证码"></mds-input>
          <i class="icon-code"></i>
        </div>
      </div>
      <div class="form-item">
        <label></label>
        <div class="form-item-content">
          <mds-button type="primary" size="large" block @click="onSubmit">下一步</mds-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formValue: {
        oldPassword: '',
        newPassword: '',
        truePassword: '',
        verificationCode: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message.warning({
        content: '操作过于频繁，请稍后再试',
        duration: 3
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-modal {
  width: 560px;
  height: 382px;
  margin: 120px auto 0;
  background: #fff;
  padding: 24px 20px 24px;
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  .modal-header {
    padding-bottom: 24px;
    padding-left: 18px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(53, 64, 82, 1);
    line-height: 24px;
  }
  .modal-content {
    padding: 16px 22px 0 0;
    .form-item {
      display: flex;
      margin-bottom: 16px;
      &:last-child {
        margin-top: 40px;
      }
      label {
        width: 98px;
        text-align: right;
        padding-right: 24px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(127, 143, 164, 1);
        line-height: 36px;
      }
      .form-item-content {
        flex: 1;
        position: relative;
        .icon-code {
          width: 77px;
          height: 28px;
          position: absolute;
          top: 4px;
          right: 4px;
          background: url(../../../assets/registration_img/code.png) no-repeat center center;
          background-size: contain;
        }
        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(169, 171, 186, 1);
          line-height: 22px;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
